<template>
  <div class="main">
    <div class="root">
      <div class="title"><p>售后处理</p></div>
      <div class="search_area">
        <input class="my_input_plus search_input" type="text" v-model="search_content">
        <button class="my_buttom" @click="serach()">搜索</button>
      </div>
      <div class="service_table">
        <div class="row">
          <div class="col big_col">售后点</div>
          <div class="col big_col">商品码</div>
          <div class="col">数量</div>
          <div class="col big_col">处理方式</div>
          <div class="col big_col">处理流水号</div>
          <div class="col ">处理状态</div>
        </div>
        <div class="row" v-for="(item,index) in service_list">
          <div class="col big_col">{{item.custormer_service.name}}</div>
          <div class="col big_col">{{item.bar_code}}</div>
          <div class="col">{{item.count}}</div>
          <div class="col big_col">{{item.deal_method}}</div>
          <div class="col big_col">{{item.serviceType}}{{item.deal_id}}</div>
          <div class="col">{{item.deal_status}}</div>
          <div class="col"><button class="my_buttom deal_butt" @click="doService(index)">处理</button></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import serviceService from "../../service/apirla/service";
  export default {
    name: 'Service',
    data () {
      return {
        service_list: [],
        warehouseId:1,
        src_service_list: [],
        search_content : ''
      }
    },
    async mounted () {
      let user = this.$store.getters.getLoginUser
      if (user == null)alert('请登录')
      this.warehouseId = user.warehouseId
      alert("欢迎："+user.name+" 您的仓库id是"+this.warehouseId)

      let result = await serviceService.getService(this.warehouseId)
      console.log(result)
      this.service_list = result.data
      this.src_service_list = result.data
    },
    methods: {
      serach ( ) {
        var index = this.search_content
        if (index == null || index == '')return
        var new_list = []
        for (var i = 0 ;  i < this.src_service_list.length ; i++){
          var temp = this.src_service_list[i]
          if (JSON.stringify(temp).includes(index)){
            var new_obj = JSON.parse(JSON.stringify(temp))
            new_list.push(new_obj)
          }
        }
        this.service_list = new_list
      },
      async doService(index) {
        var message = this.service_list[index].deal_method
        var target = this.service_list[index].serviceType + this.service_list[index].deal_id
        if (confirm("是否对["+target+"]做{"+message+"}处理？")){

        }else {
          return
        }
        let result = await serviceService.doService(this.warehouseId,this.service_list[index])
        console.log(result)
        if (result.data == null ){
          alert("网络错误")
        }else if (result.data == 1){
          alert("处理成功")
        }else if (result.data == 2){
          alert("数据错误")
        }
        let result1 = await serviceService.getService(this.warehouseId)
        this.service_list = result1.data
        this.src_service_list = result1.data
      }
    }
  }
</script>
<style>
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .root{
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title{
    margin-top: 30px;
      width: 200px;
      height: 40px;
      font-size: 30px;
    font-weight: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search_area{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    width: 400px;
    align-items: center;
  }
  .my_input_plus{
    border: 1px solid #ccc;
    padding: 7px 0px;
    border-radius: 3px;
    padding-left:5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
  }
  .my_input_plus:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
  }
  .search_input{
    width: 250px;
    height: 25px;
  }
  .my_buttom {
    width: 70px;/*设置按钮宽度*/
    height: 35px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:cornflowerblue;/*按钮背景颜色*/
    border-radius: 3px;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/
    margin: 0;
    outline: none;/*取消轮廓*/
    font-family: KaiTi;/*字体设置为楷体*/
    font-size: 17px;/*设置字体大小*/
    text-align: center;/*字体居中*/
    cursor: pointer;/*设置鼠标箭头手势*/
  }
  .search_buttom{

  }
  .row{
    display: flex;
    margin-top: 15px;
  }
  .col{
      width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
  }
  .big_col{
    width: 170px;
  }

  .service_table {
    margin-top: 30px;
  }
  .deal_butt{
    width: 50px;
    height: 20px;
  }
</style>
